<template>
  <div class="toastWrapper">
    <div class="toast">
      <slot></slot>
    </div>
  </div>

</template>
<script>
export default {
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  created() {
    setTimeout(() => {
      this.$emit('input', false)
    }, 4000)
  }
}
</script>
<style lang="stylus" scoped>
.toastWrapper
  position fixed
  left 0
  top 0
  height 100%
  width 100%
  z-index 1000
  background rgba(0, 0, 0, 0.4)
.toast
  position absolute
  left 49%
  top 49%
  transform translate(-52%, -51%)
  padding 10px
  background rgba(0, 0, 0, 0.8)
  color #ffffff
  text-align center
  z-index 1001
  border-radius 5px
  animation toast 4s forwards
@keyframes toast
  0%
    opacity 0
    display block
  10%
    opacity 1
  90%
    opacity 1
  100%
    opacity 0
    display none
</style>
